<template>
  <div>
    <div :class="{'mobile-table mobile-pt mobile-min-height':showMobilePage}" class="table-list min-fill-page">
      <dataDisplay :data-list="dataList" type="oneCell" style="margin-bottom: 20px;" />
      <div v-if="!showMobilePage" class="opeator-bar">
        <div class="flex-1">
          <FilterInput
            v-model="paramsObj"
            :filter-list="filterList"
            show-search-btn
            @handelClick="queryClick"
            @queryEmpty="queryEmpty"
            @filterTagStatus="filterTagStatus" />
        </div>
        <div>
          <div class="opeator-tool">
            <!-- <div class="tip-text"><tipIcon content="点击获取最新数据" class="ml5"/></div> -->
            <ToolTip v-if="hasRouteAuth('crm:smartSettle:update')" content="点击获取最新数据">
              <PlainCreateBtn
                :loading="updateBtnLoading"
                :show-icon="false"
                class="btn"
                @click="handleUpdate">更新结算数据</PlainCreateBtn>
            </ToolTip>
            <PlainCreateBtn
              v-if="hasRouteAuth('crm:smartSettle:batchSettle')"
              :loading="batchSettleLoading"
              :show-icon="false"
              class="btn"
              @click="handleAllSettle">一键结算</PlainCreateBtn>
            <MoreOpeator
              ref="moreOperateRef"
              :list="[
                {
                  label:'导出明细',auth: hasRouteAuth('crm:smartSettle:export'), exportApi:'/admin/account/smartSettle/export',
                  refName: 'exportRef', isBeforeExport: true,
                  exportName:'结算明细列表', beforeExport: exportBeforeExport, type: 'export'
                },
                { label:'生成记录',auth: hasRouteAuth('crm:smartSettle:log'), handelClick: () => { openLog() }}
              ]"
            />
          </div>
        </div>
      </div>
      <div>
        <div v-loading="listLoading" style="min-height: 300px">
          <u-table
            v-if="list.items.length"
            ref="tableRef"
            :data="list.items"
            :height="setTableHeight"
            :row-height="rowHeight()"
            :border="true"
            :row-class-name="tableRowClassName"
            beautify-table
            header-drag-style
            use-virtual
            class="fb-table"
            element-loading-text="加载中..."
            empty-text="暂无数据"
            header-cell-class-name="order-data-header-cell"
            fit
            highlight-current-row
            @sort-change="sortMethod"
            @select="selectTable"
            @select-all="selectTable">
            <u-table-column
              :fixed="selectFixed"
              align="center"
              type="selection"
              width="50"/>
            <u-table-column label="账号" prop="account" min-width="120">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.account" />
              </template>
            </u-table-column>
            <u-table-column label="下单平台" width="120" prop="platform">
              <template slot-scope="scope">
                <div class="flex-center">
                  <PlatformIcon :data="scope.row.platform" />
                  {{ scope.row.platform || '--' }}
                </div>
              </template>
            </u-table-column>
            <u-table-column align="right" label="结算金额(元)" prop="settleAmount" sortable="custom" min-width="140">
              <template slot-scope="scope">
                <PriceColumn :real-val="scope.row.settleAmount" :price="scope.row.settleAmount / 100" />
              </template>
            </u-table-column>
            <u-table-column align="right" label="达人到手金额(元)" prop="receivedAmount" sortable="custom" width="160">
              <template slot-scope="scope">
                <PriceColumn :real-val="scope.row.receivedAmount" :price="scope.row.receivedAmount / 100" />
              </template>
            </u-table-column>
            <u-table-column label="成本来源" prop="costSourceId" min-width="130">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.costSourceId | supplierCostBelong" />
              </template>
            </u-table-column>

            <u-table-column label="合作运营方" prop="cooperation" sortable="custom" width="160">
              <template slot-scope="scope">
                <el-tooltip v-if="scope.row.cooperation" class="item" placement="top" effect="dark">
                  <div slot="content" style="max-width:200px;">{{ scope.row.cooperation }}</div>
                  <div class="ellipsis" style="cursor:pointer;color:#406EFF;" @click="toSupplierDetail(scope.row.cooperationId)">{{ scope.row.cooperation }}</div>
                </el-tooltip>
                <div v-else>--</div>
              </template>
            </u-table-column>
            <u-table-column label="供应商" min-width="130" prop="supplier" sortable="custom">
              <template slot-scope="scope">
                <el-tooltip v-if="scope.row.supplier" class="item" placement="top" effect="dark">
                  <div slot="content" style="max-width:200px;">{{ scope.row.supplier }}</div>
                  <div class="ellipsis" style="cursor:pointer;color:#406EFF;" @click="toSupplierDetail(scope.row.supplierId)">{{ scope.row.supplier }}</div>
                </el-tooltip>
                <div v-else>--</div>
              </template>
            </u-table-column>
            <u-table-column align="left" label="跟进人">
              <template slot-scope="scope">
                <CheckUserInfo v-if="scope.row.followerUser" :label="scope.row.followerUser" :user-id="scope.row.followerUserId" />
                <div v-else>--</div>
              </template>
            </u-table-column>
            <u-table-column align="left" label="下单日期" min-width="150">
              <template slot-scope="scope">
                <div v-if="scope.row.createOrderDateStart && scope.row.createOrderDateEnd">
                  {{ scope.row.createOrderDateStart | format('YYYY/MM') }} - {{ scope.row.createOrderDateEnd | format('YYYY/MM') }}
                </div>
                <div v-else>--</div>
              </template>
            </u-table-column>
            <u-table-column align="left" label="数据更新时间" min-width="150">
              <template slot-scope="scope">
                <div v-if="scope.row.updateTime">
                  {{ scope.row.updateTime | format('YYYY/MM/DD HH:mm:ss') }}
                </div>
                <div v-else>--</div>
              </template>
            </u-table-column>
            <!-- v-if="hasRouteAuth('crm:smartSettle:settle') || hasRouteAuth('crm:smartSettle:updateData') || hasRouteAuth('crm:smartSettle:order')" -->
            <u-table-column
              :width="120"
              fixed="right"
              align="left"
              label="操作">
              <template slot-scope="scope">
                <div class="flex-center">
                  <template v-if="scope.row.followerUserId === userInfo.id">
                    <div
                      :class="{'disabled': settleLoading || !hasRouteAuth('crm:smartSettle:settle')}"
                      class="button-text br"
                      @click="handleSettle(scope.row)">结算<i v-if="settleLoading && scope.row.id === currentSettleId" class="el-icon-loading"/></div>
                    <MoreOpeator
                      :list="[
                        {
                          label: '更新数据',
                          handelClick: () => {updateSettle(scope.row.id)},
                          disabled: !hasRouteAuth('crm:smartSettle:updateData')
                        },{
                          label: '其他待结',
                          handelClick: () => {toOrder(scope.row)},
                          disabled: !hasRouteAuth('crm:smartSettle:order'),
                        },
                      ]"
                    >
                      <div
                        slot="button"
                        class="button-text">更多<i class="el-icon-arrow-down"/></div>
                    </MoreOpeator>
                  </template>

                  <div v-else>--</div>
                </div>
              </template>
            </u-table-column>
          </u-table>
          <EmptyPlaceholder v-else-if="!list.isInit" slot="empty" empty-text="暂无数据" mode="table" style="padding-bottom: 0;" />
        </div>
        <el-row v-if="showMobilePage" type="flex" justify="left">
          <SelectionNum :select-item="multipleSelectionAll" @clearMixinSelection="clearMixinSelection" />
          <el-pagination
            v-show="list.total > 0"
            :current-page.sync="page"
            :page-size="perPage"
            :total="list.total"
            :small="true"
            :page-sizes="[10, 20, 50, 100, 250, 500]"
            :layout="pageLayout"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
        <fixed-pagination v-if="(list.total > 0 && !showMobilePage) || showMobilePage">
          <template v-if="showMobilePage">
            <FilterInput
              ref="FilterToolRef"
              v-model="paramsObj"
              :filter-list="filterList"
              show-search-btn
              show-mobile-icon
              @handelClick="queryClick"
              @queryEmpty="queryEmpty"
              @filterTagStatus="filterTagStatus" />
            <MoreOpeator
              ref="moreOperateRef"
              :list="[
                {
                  label:'导出明细',exportApi:'/admin/account/smartSettle/export',
                  auth: hasRouteAuth('crm:smartSettle:export'),
                  refName: 'exportRef', isBeforeExport: true,
                  exportName:'结算明细列表', beforeExport: exportBeforeExport, type: 'export'
                },
                { label:'生成记录', auth: hasRouteAuth('crm:smartSettle:log'), handelClick: () => { openLog() }},
                { label:'更新结算数据', auth: hasRouteAuth('crm:smartSettle:update'), handelClick: () => { handleUpdate() }},
              ]"
              show-mobile-icon
            />
            <el-button
              :loading="batchSettleLoading"
              type="primary"
              class="mobile-btn"
              size="small"
              @click="handleAllSettle">一键结算</el-button>
          </template>
          <template v-else>
            <SelectionNum :select-item="multipleSelectionAll" @clearMixinSelection="clearMixinSelection" />
            <div class="flex-1 justify-center">
              <el-button
                type="info"
                size="small"
                class="cancel-btn-style"
                style="margin-right:10px;"
                @click="toBack">返回列表</el-button>
            </div>
            <el-pagination
              v-show="list.total > 0"
              :current-page.sync="page"
              :page-size="perPage"
              :total="list.total"
              :page-sizes="[10, 20, 50, 100, 250, 500]"
              layout="total, prev, pager, next, sizes, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </template>
        </fixed-pagination>
      </div>
    </div>
    <BatchDialog ref="BatchDialog" :batch-settle-info="batchSettleInfo" @handleSubmit="handelBatchSettle"/>
    <LoadingDialog ref="LoadingDialog" :batch-settle-info="batchSettleInfo"/>
    <TipDialog ref="TipDialog" :batch-settle-info="batchSettleInfo" @searchFailAccount="searchFailAccount"/>
    <SettleLog ref="settleLogRef" />
    <UpdateDialog
      v-if="list.otherData"
      :visible="updateVisible"
      :id="list.otherData.id"
      :follow-users="followUsers"
      :time="createOrderTime"
      @closeDialog="closeUpdateDialog"
      @updateData="updateData"
      @btnStatus="btnStatus"/>
  </div>
</template>

<script>
// components
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import dataDisplay from '@/components/Common/baseComponent/dataDisplay';
import createBtn from '@/components/Common/baseComponent/createBtn';
import btnGroup from '@/components/Common/baseComponent/btnGroup';
import MoreOpeator from '@/components/Common/baseComponent/moreOpeator';
import PlatformIcon from '@/components/Common/platformIcon';
import BatchDialog from '@/views/todo/components/batchDialog';
import LoadingDialog from '@/views/todo/components/loadingDialog';
import TipDialog from '@/views/todo/components/tipDialog';
import SettleLog from './components/settleLog';
import UpdateDialog from '@/views/todo/detail/module/updateDialog';
// mixins
import tableSelections from '@/mixins/tableSelections';
import TableAdaptive from '@/mixins/tableAdaptive';
import mobileTable from '@/mixins/mobileTable';
import { supplierCostBelong } from '@/filters/status';
import { format } from '@/filters/date';
// api
import { getSmartSettleList } from '@/api/settle';
import { batchSettleStatus, batchSettle, updateSingleSettleData } from '@/api/todo';
import { costList } from '@/api/config';
import { platformList } from '@/api/select';
import { accountSettleInfo } from '@/api/supplier';
// tools
import { mapState } from 'vuex';
// import { showModal } from '@/utils/message';
import { paramsRangeFormat } from '@/utils/paramsFormat';
import { hasRouteAuth } from '@/utils/permission';
// imgs
import icon_11 from '@/assets/dataDisplay/icon_11.png';
import icon_29 from '@/assets/dataDisplay/icon_29.png';
import icon_51 from '@/assets/dataDisplay/icon_51.png';
import icon_52 from '@/assets/dataDisplay/icon_52.png';
export default {
  components: {
    EmptyPlaceholder, BatchDialog, LoadingDialog, TipDialog,
    dataDisplay, createBtn, btnGroup, MoreOpeator, PlatformIcon,
    SettleLog, UpdateDialog
  },
  filters: { supplierCostBelong, format },
  mixins: [tableSelections, TableAdaptive, mobileTable],
  data() {
    return {
      icon_29, icon_11, icon_52, icon_51,
      paramsObj: {},
      listLoading: false,
      settleLoading: false,
      currentSettleId: '',
      sortName: '',
      sortType: '',
      platformOption: [],
      list: {
        items: [],
        page: 1,
        perPage: 10,
        total: 0,
        isInit: true
      },
      page: 1,
      perPage: 10,
      tableRefName: 'tableRef', // 表格的ref名称
      idKey: 'id', // 唯一表示字段
      isUmyTable: true,
      batchSettleLoading: false,
      updateBtnLoading: false,
      batchSettleInfo: {},
      timer: null,
      updateVisible: false,
      uniqueKey: '',
      costItemProjectOptions: [],
      costItemOptions: [],
      todoOrderTime: [],
      fromType: ''
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo,
      'showMobilePage': state => state.app.showMobilePage
    }),
    followUsers() {
      return this.userInfo.id;
    },
    tableOutsideHeight() {
      return this.showMobilePage ? 210 : 250;
    },
    dataList() {
      const data = this.list.otherData || {};
      const startTime = data.createOrderDateStart ? format(data.createOrderDateStart, 'YYYY/MM') : '';
      const endTime = data.createOrderDateEnd ? format(data.createOrderDateEnd, 'YYYY/MM') : '';
      return [
        { label: '待结算总金额', data: data.unSettleAmount, icon: icon_29 },
        { label: '待结算成本数', data: data.beSettledCosts, icon: icon_11, isMoney: false, unit: '条' },
        { label: '下单日期', data: `${startTime} - ${endTime}`, icon: icon_52 },
        { label: '数据更新时间', data: data.updateTime ? format(data.updateTime, 'YYYY/MM/DD HH:mm:ss') : '', icon: icon_51 }
      ];
    },
    createOrderTime() {
      if (this.fromType === 'todo' && this.todoOrderTime.length === 2) {
        return [...this.todoOrderTime];
      }
      let startTime = this.list.otherData.createOrderDateStart;
      let endTime = this.list.otherData.createOrderDateEnd;
      if (startTime.toString().length === 10) {
        startTime = startTime * 1000;
      }
      if (endTime.toString().length === 10) {
        endTime = endTime * 1000;
      }
      return [startTime, endTime];
    },
    filterList() {
      return [
        { keyword: 'account', name: '账号', labelWidth: '100px', type: 'input' },
        { keyword: 'followerUser', name: '跟进人', labelWidth: '100px', type: 'input' },
        { keyword: 'cooperation', name: '合作运营方', labelWidth: '100px', type: 'input' },
        { keyword: 'supplier', name: '供应商', labelWidth: '100px', type: 'input' },
        { keyword: 'accounts', name: '批量搜索账号', labelWidth: '100px', type: 'input', inputType: 'textarea',
          lengthLimit: false, placeholder: '可通过粘贴快速填写账号名称，每行代表一个账号名称' },
        { keyword: 'settleAmount', name: '结算金额', labelWidth: '100px', type: 'inputRange',
          isRequired: true, startPlaceholder: '最低金额', endPlaceholder: '最高金额', max: 999999999 },
        { keyword: 'receivedAmount', name: '达人到手金额', labelWidth: '100px', type: 'inputRange',
          isRequired: true, startPlaceholder: '最低金额', endPlaceholder: '最高金额', max: 999999999 },
        { keyword: 'platformId', name: '下单平台', type: 'select', options: this.platformOption },
        { keyword: 'costSourceId', name: '成本来源', type: 'select', options: [
          { value: 0, label: '渠道订单' },
          { value: 1, label: '项目订单' },
          { value: 2, label: '商务订单' },
          { value: 3, label: '营销授权' },
          { value: 4, label: '电商销售' },
          { value: 5, label: '项目渠道单' }
        ] }
      ];
    },
    rangeKeyArr() {
      return [
        { attr: 'settleAmount', start: 'settleAmountStart', end: 'settleAmountEnd', type: 'moneyFixed' },
        { attr: 'receivedAmount', start: 'receivedAmountStart', end: 'receivedAmountEnd', type: 'moneyFixed' }
      ];
    }
  },
  created() {
    this.fetchData(true, true);
    this.platformList();
    this.costItemList();
  },
  methods: {
    hasRouteAuth,
    fetchData(reset = false, init = false) {
      if (reset) this.page = 1;
      const params = this.getParams();
      if (this.sortName) params.sortName = this.sortName;
      if (this.sortType) params.sortType = this.sortType;
      this.listLoading = true;
      getSmartSettleList(params).then(({ data }) => {
        this.list = data;
        if (init) {
          let startTime = this.$route.query.startTime;
          let endTime = this.$route.query.endTime;
          if (startTime && endTime) {
            startTime = new Date(startTime).valueOf();
            endTime = new Date(endTime).valueOf();
            this.todoOrderTime = [Number(startTime), Number(endTime)];
            this.fromType = 'todo';
            this.$nextTick(() => {
              this.handleUpdate();
              // history.replaceState({}, '', '/#/businessPage/batchSettle');
            });
          }
        }

        this.list.isInit = false;
        this.listLoading = false;
        if (this.setSelectRow) this.setSelectRow(data.items);

        // if (data.otherData) this.setTimer(1500, true);
      }, result => {
        this.listLoading = false;
      }).catch(e => {
        console.error(e);
      });
    },
    queryClick() {
      this.fetchData(true);
    },
    queryEmpty() {
      this.paramsObj = {};
      if (this.clearMixinSelection) this.clearMixinSelection();
      this.queryClick();
    },
    getParams(sendPageConfig = true) {
      const params = JSON.parse(JSON.stringify(this.paramsObj));
      paramsRangeFormat(this.rangeKeyArr, params);
      if (sendPageConfig) {
        params.page = this.page;
        params.perPage = this.perPage;
      }
      return params;
    },
    sortMethod(a) {
      if (!a.order) {
        this.sortName = '';
        this.sortType = '';
      } else {
        this.sortName = a.prop;
        this.sortType = a.order === 'ascending' ? 1 : -1;
      }
      this.fetchData();
    },
    handleCurrentChange(toPage) {
      this.page = toPage;
      this.fetchData();
      this.$nextTick(() => {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      });
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.fetchData(true);
      this.$nextTick(() => {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      });
    },
    async platformList() {
      try {
        const result = await platformList();
        result.data = result.data.map(item => {
          item = {
            value: item.id,
            label: item.value
          };
          return item;
        });
        result.data.unshift({ value: -2, label: '--' });
        this.platformOption = result.data;
      } catch (error) {
        console.log(error);
      }
    },
    /**
     * 操作
     */

    toSupplierDetail(id) {
      if (!id) return;
      const url = this.$router.resolve({
        name: 'supplierManageDetail',
        params: { id }
      });
      window.open(url.href, '_blank');
    },
    exportBeforeExport() {
      const params = this.getParams();
      if (this.multipleSelectionAll.length) {
        params.ids = this.multipleSelectionAll.map(el => el.id).join(',');
      }
      this.$refs['moreOperateRef'] && this.$refs['moreOperateRef'].btnExport(params, 'exportRef');
    },
    toBack() {
      this.$router.push({
        name: 'supplier'
      });
    },
    // 结算操作
    handleSettle(row) {
      if (!this.hasRouteAuth('crm:smartSettle:settle')) return;
      if (this.settleLoading) return;
      this.settleLoading = true;
      this.currentSettleId = row.id;
      accountSettleInfo({ settlementId: row.id }).then(res => {
        this.settleLoading = false;
        if (res.code !== 200) {
          this.$message.error(res.message);
          return;
        }
        localStorage.setItem('accountSettleData', JSON.stringify(res.data));
        this.$router.push({
          name: 'supplierCreate',
          query: {
            isInvite: 1,
            isAccountSettle: 1
          }
        });
      }).catch(err => {
        this.settleLoading = false;
        console.log(err);
      });
    },
    // 一键发起结算
    handleAllSettle() {
      // 所选数据包含其他跟进人账号
      this.$refs.BatchDialog.openDialog();
    },
    handelBatchSettle(settleType = 1) {
      let ids = '';
      if (this.multipleSelectionAll.length) {
        ids = this.multipleSelectionAll.map(e => e.id).join(',');
      }
      this.batchSettleLoading = true;
      const data = this.getParams(false);
      data.settleType = settleType;
      data.ids = ids;
      data.id = this.list.otherData.id;
      this.uniqueKey = this.generateKey();
      data.uniqueKey = this.uniqueKey;
      batchSettle(data).then(res => {
        if (res.code === 200) {
        // 开启轮询，获取更新情况
          if (!this.timer) {
            this.setTimer();
          }
        }
      }).catch(err => {
        this.batchSettleLoading = false;
        console.log(err);
      });
    },
    updateSettle(id) {
      updateSingleSettleData({ id }).then(res => {
        if (res.code === 200) {
          this.fetchData();
          this.$message.success('更新成功');
        } else {
          this.$message.error(res.msg || '更新失败');
        }
      });
    },
    toOrder(row) {
      // costSourceId 0: 渠道订单  5: 项目渠道订单
      const orderPlatform = this.platformOption.find(i => i.label === row.platform);
      const costItem = [];
      const costItemOptions = row.costSourceId === 5 ? this.costItemProjectOptions : this.costItemOptions;
      costItemOptions.forEach((i) => {
        if (['达人分成', '达人分成补差'].includes(i.costName)) {
          costItem.push(i.costId);
        }
      });
      let orderPlatformId = '';
      if (orderPlatform) {
        orderPlatformId = orderPlatform.value;
      }
      const params = {
        cooperation: row.cooperation, // 合作运营方
        resourceCode: row.resourceCode, // 账号ID
        orderPlatformId: [orderPlatformId], // 订单平台ID
        costItem, // 成本项
        costSettleStatus: 0 // 成本结算：待结算
      };
      localStorage.setItem('jumpOrderParams', JSON.stringify(params));
      const routerParams = {
        name: row.costSourceId === 5 ? 'projectChild' : 'allOrder'
      };
      const routeUrl = this.$router.resolve(routerParams);
      window.open(routeUrl.href, '_blank');
    },
    // 每隔一段时间去查询是否在更新信息
    setTimer(time = 1500, isInit) {
      this.timer = setInterval(() => {
        this.batchSettleStatus(isInit);
      }, time);
    },
    // 刷新列表，清除定时器
    clearTimer() {
      clearInterval(this.timer);
      this.timer = null;
    },
    batchSettleStatus(isInit = false) {
      const data = {
        id: this.list.otherData.id,
        uniqueKey: this.uniqueKey
      };
      batchSettleStatus(data).then(res => {
        this.batchSettleInfo = res.data;
        const { status, total, settleNames } = res.data;
        if (status !== 1) { // 0无结算任务，1结算中，2结算成功，3结算失败
          this.clearTimer();
          !isInit && this.completeSettle(status, res.data.errMsg);
          this.batchSettleLoading = false;
        }
        if (status === 1 && total && this.$refs.LoadingDialog && !this.$refs.LoadingDialog.dialogVisible) {
          this.$refs.LoadingDialog.openDialog(settleNames, total);
        }
        this.multipleSelectionAll = [];
      }).catch(err => {
        this.batchSettleLoading = false;
        console.log(err);
        this.clearTimer();
      });
    },
    completeSettle(status, message) {
      if (status === 3 || status === 2) {
        const dialogType = status === 3 ? 0 : 1;
        this.$refs.LoadingDialog && this.$refs.LoadingDialog.handleClose();
        this.$refs.TipDialog.openDialog(dialogType, message);
        this.fetchData(true);
      }
    },
    // 搜素失败账号
    searchFailAccount(failAccountName = ' ') {
      this.paramsObj = {};
      const accounts = failAccountName.replace(/,/g, '\n');
      this.$set(this.paramsObj, 'accounts', accounts);
      this.fetchData(true);
    },
    openLog() {
      this.$refs.settleLogRef.openDrawer();
    },
    generateKey() {
      return new Date().valueOf() + '_' + Math.ceil(Math.random() * 99999);
    },
    /**
     * 更新结算数据
     */
    handleUpdate() {
      this.updateVisible = true;
    },
    closeUpdateDialog() {
      this.updateVisible = false;
      this.fromType = '';
    },
    btnStatus(val) {
      this.updateBtnLoading = val;
    },
    updateData() {
      this.updateVisible = false;
      this.fromType = '';
      this.queryEmpty();
    },
    // 获取成本项列表
    costItemList() {
      this.costItemOrderList();
      this.costItemProjectOrderList();
    },
    async costItemOrderList() {
      try {
        const params = { page: 1, perPage: 100, costBelong: 0 };
        const result = await costList(params);
        if (result.data) {
          this.costItemOptions = result.data.items;
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 获取成本项列表
    async costItemProjectOrderList() {
      try {
        const params = { page: 1, perPage: 100, costBelong: 5 };
        const result = await costList(params);
        if (result.data) {
          this.costItemProjectOptions = result.data.items;
        }
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.table-list {
  margin: 16px 16px 0 16px;
  background-color: #fff;
  padding: 20px 20px 55px 20px;
}
.opeator-bar {
  display: flex;
  margin-bottom:16px;
}
.flex-1 {
  flex: 1;
}
.justify-center {
  justify-content: center;
  display: flex;
}
.mobile-btn {
  width: 100%;
}
.opeator-tool {
  display: flex;
  .btn {
    padding: 7px 15px;
    margin-right: 10px;
    margin-left: 0px;
  }
}
.tip-text {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #AEB6C7;
  flex-shrink: 0;
  margin-right: 10px;
}
</style>
